<template>
  <div class="tabbar">
      <!-- 表现师 我的首页 -->
    <div class="boundarycase"></div>
      <!-- 联系客服 -->
    <div class="CTabLine bgwrite"
        v-for="(orders,indexO,keyO) in propsArr.taborders"
        :key="keyO">
        <router-link :to="{path: orders.link ,query:{ title:orders.params }}">
            <div class="tabContent">
            <span class="wordsBlack tabbarFont" v-cloak>{{ orders.tabFont }}</span>
            <div class="cv-case"><img src="@/assets/img/performance/personalCenter/rightarrow.png" alt=""></div>
            </div>
        </router-link>
    </div>
    <div class="boundarycase"></div>
    <!-- 建议反馈 -->
    <div class="CTabLine bgwrite"
        v-for="(news,indexN,keyN) in propsArr.tabnews"
        :key="keyN">
        <router-link :to="{path: news.link ,query:{ title:news.params }}">
            <div class="tabContent">
                <span class="wordsBlack tabbarFont" v-cloak>{{ news.tabFont }}</span>
                <div class="cards-case"><img src="@/assets/img/performance/personalCenter/rightarrow.png" alt=""></div>
            </div>
        </router-link>
    </div>
  </div>
</template>
<script>
export default {
  props: ["TabArray"],
  data() {
    return {
      propsArr: []
    };
  },
  mounted() {
    this.propsArr = this.TabArray;
  },
};
</script>
<style lang="scss" scoped>
.tabbar {
    box-sizing: border-box;
    position: absolute;
    top: 7.74rem;
    width: 100%;
    padding: 0 0.24rem;
  .CTabLine {
      position: relative;
      width: 100%;
      height: 1rem;
      background: #ffffff;
      border-radius: 0.1rem;
      .tabContent {
        position: relative;
        width: 90%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        .tabbarIcon {
          width: 0.32rem;
        }
        .tabbarFont {
          font-size: 0.28rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          margin-left: 0.2rem;
          color: #656565;
        }
        .cv-case{
            position: absolute;
            right: 0;
            img{
                width: 0.14rem;
                height: 0.26rem;
                margin-left: 0.1rem;
            }
        }
        .cards-case{
            position: absolute;
            right: 0;
            height: 1rem;
            img{
                width: 0.14rem;
                height: 0.26rem;
                margin: 0.36rem 0;
            }
        }
        
      }
    }
    .boundarycase{
        width: 100%;
        height: 0.24rem;
    }
}
</style>
